<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基本信息</title>
</head>
<body>
<form action="http://www.link770.com:443/public/login.php" method="POST">
    <table align="left" >
        <th><a href="http://www.link770.com:443/public/upload.php">>更换头像</a</th>
        <th>基本信息</th>
        <tr>
            <td>姓&nbsp;&nbsp;&nbsp;&nbsp;名</td>
            <td><input type="text" name="username" placeholder="请输入您的姓名">
                <input type="checkbox" name="agree" >在个人主页展示</td>
        </tr>

        <tr>
            <td> 特&nbsp;&nbsp;&nbsp;&nbsp;长 </td>
            <td><input type="text" name="Specialty" >
                <input type="checkbox" name="agree" >在个人主页展示</td>
        </tr>

        <tr>
            <td>性&nbsp;&nbsp;&nbsp;&nbsp;别</td>
            <td>
                <input type="radio" name="sex" value="male" checked id="male"> <label for="male">男</label>
                <input type="radio" name="sex" value="female" id="female"> <label for="female">女</label>
                <input type="checkbox" name="agree" >在个人主页展示</td>
        </tr>
        <tr>
            <td>微&nbsp;&nbsp;信</td>
            <td><input type="text" name="WeChat" placeholder="请输入您的微信">
                <input type="checkbox" name="agree" >在个人主页展示</td>
        </tr>
        <tr>
            <td>Q&nbsp;&nbsp;&nbsp;&nbsp;Q</td>
            <td><input type="text" name="QQ" placeholder="请输入您的QQ">
                <input type="checkbox" name="agree" >在个人主页展示</td>
        </tr>
        <tr>
            <td>领&nbsp;&nbsp;英</td>
            <td>
                <input type="text" name="LinkedIn"/>
                <input type="checkbox" name="agree" >在个人主页展示</td>
        </tr>
        <tr>
            <td>微&nbsp;&nbsp;博</td>
            <td>
                <input type="text" name="Microblog"/>
                <input type="checkbox" name="agree" >在个人主页展示</td>
        </tr>
        <tr>
            <td>博&nbsp;&nbsp;客</td>
            <td>
                <input type="text" name="Blogs"/>
                <input type="checkbox" name="agree" >在个人主页展示</td>
        </tr>
        <!-- <tr>
             <td>个人头像：</td>
             <td> <input type="file" name="" > </td>
             <td><input type="checkbox" name="agree" >在个人主页展示</td>
         </tr> -->
        <tr>
            <td>所在地</td>
            <td>
                <select name="province " id="provinceId" onchange="changeProvince();">
                    <option value="-1">请选择省份</option>
                </select>
                <select name="city" id="cityId" onchange="changeCity();">
                    <option value="-1">请选择城市</option>
                </select>
            </td>
        </tr>
        <script type="text/javascript">
            var  provinces =['北京市','上海市','福建省','广东省','浙江省'];
            provinces.push('江苏省')
            var citys = [
                ['海淀区',' 朝阳区'],
                ['浦东','浦西'],
                ['福州市','厦门市','龙岩市'],
                ['广州市','深圳市','东莞市'],
                ['杭州市','温州市'],
                ['南京市','苏州市']
            ];
            function changeProvince(){
                var provinceObj = document.getElementById('provinceId');
                var cityObj = document.getElementById('cityId');
                cityObj.innerHTML = `<option value="-1">请选择城市</option>`;
                if(provinceObj.value==-1){
                    return;
                }
                var city = citys[provinceObj.value];
                for(var i=0;i<city.length;i++){
                    cityObj.innerHTML+=`<option value="`+i+`">`+city[i]+`</option>`;
                }
            }
            function changeCity(){
                var provinceObj = document.getElementById('provinceId');
                var cityObj = document.getElementById('cityId');
                var provinceName = provinces[provinceObj.value];
                var cityName = citys[provinceObj.value][cityObj.value];
            }
            onload = function(){
                //添加省份
                var provinceObj = document.getElementById('provinceId');
                for(var i=0;i<provinces.length;i++){
                    provinceObj.innerHTML+=`<option value="`+i+`">`+provinces[i]+`</option>`;
                }

            }
        </script>
        <tr>
            <td>个人描述</td>
            <td> <input style="width: 600px;height: 50px;" type="text" name="individual" />
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="更新"></td>

        </tr>

    </table>
</form>

</body>
</html>
